<template>
    <div class="select-casc" v-clickoutside="closeTree">
        <div class="input-wrap" @click="focusFun">
            <el-input v-model="labelVal" :placeholder="placeholder" readonly></el-input>
            <i class="fa fa-times" 
                @click.stop="clearFun" title="清空" v-show="inputVal">
            </i>
        </div>
        <div class="tree-box" v-if="show">
            <el-tree
                :data="treeData"
                :props="defaultProps"
                lazy
                :load="load"
                @node-click="nodeClick">
            </el-tree>
        </div>
    </div>
</template>

<script>
import { queryAllService, queryParaClass } from '@/service/core/sysConfig';
export default {
    name: 'selectCase', // 选择参数字典 组件
    props: {
        value: String,
        label: String,
        disabled: {
            type: Boolean,
            default: false
        },
        placeholder: String
    },
    data() {
        return {
            show: false,
            treeData: [],
            defaultProps: {
                label: 'name',
                isLeaf: 'leaf'
            }
        }
    },
    computed: {
        inputVal: {
            get: function() {
                return this.value
            },
            set: function(val) {
                this.$emit('input', val);
            }
        },
        labelVal: {
            get: function() {
                return this.label
            },
            set: function(val) {
                this.$emit('update:label', val);
            }
        }
    },
    watch: {
        value(val) {
            if(!val) {
                this.labelVal = '';
            }
        }
    },
    methods: {
        load(node, resolve) {
            if(node.level == 0) {
                let params = {};
                queryAllService(params).then(res=>{
                    let data = res.data.data;
                    if(Array.isArray(data)){
                        resolve(data);
                    }else {
                        resolve([]);
                    }
                })
            }else if(node.level == 1) {
                let params = {
                    moduCode: node.data.id,
                    typeId:'SYS'
                }
                queryParaClass(params).then(res => {
                    if(res.data.code == 1000) {
                        let data = res.data.data;
                        if(Array.isArray(data)) {
                            data = data.map(item => {
                                return {
                                    ...item,
                                    leaf: true
                                }
                            })
                            resolve(data);
                        }else {
                            resolve([]);
                        }
                    }
                })
            }else {
                resolve([]);
            }
        },
        focusFun() {
            this.show = true;
        },
        closeTree() {
            this.show = false;
        },
        nodeClick(node) {
            if(node.code) {
                this.inputVal = node.code;
                this.labelVal = node.name;
                this.closeTree();
            }
        },
        clearFun() {
            this.inputVal = '';
            this.labelVal = '';
        }
    }
}
</script>

<style lang="scss" scoped>
.select-casc {
    position: relative;
    .input-wrap {
        position: relative;
        > i {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    }
    .tree-box {
        position: absolute;
        top: 35px;
        left: 0;
        right: 0;
        width: 100%;
        height: 200px;
        overflow: auto;
        border: 1px solid #ddd;
        z-index: 10;
        padding: 5px;
        background: #fff;
    }
}
</style>